<!DOCTYPE html>
<html lang="en" ng-app="wetterLuchs">
<head>
	<meta charset="UTF-8">
	<title>Wetterluchs</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="apple-touch-icon" href="http://wetterluchs.benjaminsinger.de/img/homescreen_icon_rain_150.png">
</head>
<body ng-controller="WeatherCtrl" ng-style="bgImgCurrentWeather">
	<div class="bg-darker">

		<a href="#" id="refresh-button" class="btn btn-default btn-sm" role="button" onclick="window.location.reload()">
			<span class="glyphicon glyphicon-repeat"></span>
		</a>

		<div class="modal fade" id="geo-error-modal" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">Standortbestimmung</h4>
					</div>
					<div class="modal-body">
						<p>Du hast die <strong>Standortbestimmung abgelehnt</strong> (oder verwendest einen alten Browser). Leider kann das Wetter für deinen aktuellen Ort so nicht ermittelt werden.</p>
						<p>Lade die Seite erneut oder aktiviere die Positionsbestimmung in den Einstellungen, um deinen Standort zu ermitteln.</p>
						<p>In manchen Browsern ist es au&szlig;erdem notwendig, Wi-Fi zu aktivieren.</p>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="row weather-info">
				<h1 class="text-center">天气预报</h1>
				<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
					<h2 class="city text-center">
						{{ getCityName == '' ? geoCoordinates : getCityName }}<span class="glyphicon glyphicon-map-marker"></span>
					</h2>
					<p>
						<span class="data-label">今天是</span>

						<my-data-loader data="currentWeather"></my-data-loader>

						<span class="data-value" ng-show="currentWeather">
							{{ currentWeather.currently.time * 1000 | date:'d.M.yyyy' }}
						</span>
						<!--Automatischer(?) Browser Cache! Sendet "bloß" alle paar Minuten neuen Request, deswegen "current time" auch nie ganz genau; klappt aber wohl bloß lokal-->
					</p>
					<p>
						<span class="data-label">现在的天气是?</span>

						<my-data-loader data="currentWeather"></my-data-loader>

						<span class="data-value" ng-show="currentWeather">
							{{ currentWeather.currently.temperature | number:0 | tempCelsius}}
							<small>(gef&uuml;hlt {{ currentWeather.currently.apparentTemperature | number:0 | tempCelsius}})</small><br />
							{{ currentWeather.currently.summary }}
						</span>
					</p>
					<p>
						<span class="data-label">
							未来一周天气?
						</span>
						<span class="data-value">
							{{ currentWeather.daily.summary }}
						</span>
					</p>
					<p>
						<span class="data-label">
							<strong>1 周</strong>前天气
							<small ng-show="weather1week">({{ weather1week.currently.time * 1000 | date:'M.d.yyyy' }})</small>
						</span>

						<my-data-loader data="weather1week"></my-data-loader>

						<span class="data-label" ng-show="weather1week">
							{{ weather1week.currently.temperature | number:0 | tempCelsius}},
							{{ weather1week.currently.summary }}
						</span>
					</p>
					<p>
						<span class="data-label">
							<strong>10 年</strong>前天气 
							<small ng-show="weather10years">({{ weather10years.currently.time * 1000 | date:'d.M.yyyy' }})</small>
						</span>

						<my-data-loader data="weather10years"></my-data-loader>

						<span class="data-label" ng-show="weather10years">
							{{ weather10years.currently.temperature | number:0 | tempCelsius}},
							{{ weather10years.currently.summary }}
						</span>
					</p>
					<p>
						<span class="data-label">
							<strong>25 年</strong>前天气 
							<small ng-show="weather25years">({{ weather25years.currently.time * 1000 | date:'d.M.yyyy' }})</small>
						</span>

						<my-data-loader data="weather25years"></my-data-loader>

						<span class="data-label" ng-show="weather25years">
							{{ weather25years.currently.temperature | number:0 | tempCelsius }},
							{{ weather25years.currently.summary }}
						</span>
					</p>
				</div>
			</div>
		</div>

		<div class="container-fluid">
			<div class="row footer">
				<div class="col-xs-12">
					<p>
						<span class="footer-block">&copy; 2016 Benjamin Singer</span>
						<span class="footer-inline">&copy; 2016 Benjamin Singer |</span>

						<span class="footer-block">Data provided by <a href="https://developers.google.com/maps/?hl=de" target="_blank">Google Maps</a> and <a href="https://darksky.net/" target="_blank">Dark Sky</a></span>
						<span class="footer-inline">Data provided by <a href="https://developers.google.com/maps/?hl=de" target="_blank">Google Maps</a> and <a href="https://darksky.net/" target="_blank">Dark Sky</a> |</span>

						<a href="#" data-toggle="modal" data-target="#impressum-modal">Impressum</a> |
						<a href="#" data-toggle="modal" data-target="#datenschutz-modal">Datenschutz</a>
					</p>
					<p>
						Photo by <a ng-href="{{ unsplashPhoto.user.links.html }}">{{ unsplashPhoto.user.name }}</a>, distributed via <a href="https://unsplash.com/">Unsplash</a>
					</p>
				</div>
			</div>
		</div>


		<div id="impressum-modal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">Impressum</h4>
					</div>
					<div class="modal-body">
						<p><strong>Angaben gem&auml;&szlig; &sect;5 TMG:</strong></p>
						<p>
							Benjamin Singer<br />
							Schopenstehl 33<br />
							20095 Hamburg<br />
							mail [a] benjaminsinger.de
						</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Schlie&szlig;en</button>
					</div>
				</div>
			</div>
		</div>

		<div id="datenschutz-modal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">Datenschutzerkl&auml;rung</h4>
					</div>
					<div class="modal-body">
						<p>
							<strong>Datenschutzerkl&auml;rung f&uuml;r die Nutzung von Google Analytics</strong>
						</p>
						<p>Diese Website nutzt Funktionen des&nbsp; Webanalysedienstes Google Analytics. Anbieter ist die Google Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043, USA. Google Analytics verwendet sog. &quot;Cookies&quot;. Das sind Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie erm&ouml;glichen. Die durch den Cookie erzeugten Informationen &uuml;ber Ihre Benutzung dieser Website werden in der Regel an einen Server von Google in den USA &uuml;bertragen und dort gespeichert.</p>
						<p>Im Falle der Aktivierung der IP-Anonymisierung auf dieser Webseite wird Ihre IP-Adresse von Google jedoch innerhalb von Mitgliedstaaten der Europ&auml;ischen Union oder in anderen Vertragsstaaten des Abkommens &uuml;ber den Europ&auml;ischen Wirtschaftsraum zuvor gek&uuml;rzt. Nur in Ausnahmef&auml;llen wird die volle IP-Adresse an einen Server von Google in den USA &uuml;bertragen und dort gek&uuml;rzt. Im Auftrag des Betreibers dieser Website wird Google diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports &uuml;ber die Websiteaktivit&auml;ten zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen gegen&uuml;ber dem Websitebetreiber zu erbringen. Die im Rahmen von Google Analytics von Ihrem Browser &uuml;bermittelte IP-Adresse wird nicht mit anderen Daten von Google zusammengef&uuml;hrt.</p>
						<p>Sie k&ouml;nnen die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht s&auml;mtliche Funktionen dieser Website vollumf&auml;nglich werden nutzen k&ouml;nnen. Sie k&ouml;nnen dar&uuml;ber hinaus die Erfassung der durch das Cookie erzeugten und auf Ihre Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem sie das unter dem folgenden Link verf&uuml;gbare Browser-Plugin herunterladen und installieren: <a href="http://tools.google.com/dlpage/gaoptout?hl=de" target="_blank">http://tools.google.com/dlpage/gaoptout?hl=de</a></p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Schlie&szlig;en</button>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script src="js/angular.min.js" type="text/javascript"></script>
	<script src="js/app.js" type="text/javascript"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="includes/js/modernizr-custom.js" type="text/javascript"></script>
	<script>
		// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		// 		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		// 	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		// })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		// ga('create', 'UA-1886158-8', 'auto');
		// ga('send', 'pageview');

	</script>
</body>
</html>